<script setup>
import {ref} from "vue";

const time = ref('')
const shortcuts = [
	{
		text: '今天',
		value: new Date(),
	},
	{
		text: '明天',
		value: () => {
			const date = new Date()
			date.setTime(date.getTime() + 3600 * 1000 * 24)
			return date
		},
	},
	{
		text: '下周',
		value: () => {
			const date = new Date()
			date.setTime(date.getTime() + 3600 * 1000 * 24 * 7)
			return date
		},
	},
	{
		text: '长期',
		value: () => {
			const date = new Date()
			date.setTime(date.getTime() + 3600 * 1000 * 24 * 365 * 10)
			return date
		},
	},
]

const datePickerRef = ref()
const afterPopover = () =>{
	datePickerRef.value.focus()
}
const emit = defineEmits(['timeChange'])
const deteChange = (value)=>{
	emit('timeChange', value)
}
</script>

<template>
	<el-popover
		placement="right"
		:width="435"
		trigger="click"
		@after-enter="afterPopover">
		<template #reference>
			<div class="add-user-icon">
				<el-icon size="18"><Calendar /></el-icon>
			</div>
		</template>
		<div>
			<el-date-picker
				ref="datePickerRef"
				v-model="time"
				:shortcuts="shortcuts"
				placeholder="请选择日期"
				type="datetime"
				@change="deteChange"
			/>
		</div>
	</el-popover>
</template>

<style lang="scss" scoped>
.add-user-icon {
	border: 1px dashed;
	border-radius: 100%;
	width: 32px;
	height: 32px;
	text-align: center;
	line-height: 37px;
	color: #c1c2c3;
	&:hover {
		color:#409eff;
		cursor: pointer;
	}
}
.select-user-avatar {
	&:hover {
		cursor: pointer;
	}
	> .el-avatar {
		margin-right: 14px;
		font-size: 12px;
	}
}
.search-select-user {
	margin-bottom: 15px;
}
</style>
